<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1300px"
    @close="close"
  >
    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="任务ID"
        prop="WorkTaskSetID"
        show-overflow-tooltip
        width="100"
      />

      <el-table-column
        align="center"
        label="任务名称"
        prop="WorkTaskName"
        show-overflow-tooltip
      />

      <el-table-column label="规定时长" show-overflow-tooltip align="center">
        <template #default="{ row }">{{ row.ServiceDates }}个月</template>
      </el-table-column>
      <el-table-column label="限定数量" show-overflow-tooltip align="center">
        <template #default="{ row }">{{ row.TaskSetNum }}</template>
      </el-table-column>
      <el-table-column
        v-if="!appoint"
        label="约定时长"
        width="220"
        align="center"
      >
        <template #default="{ row }">
          <el-input-number
            v-model="row.ServiceDateSet"
            :disabled="TaskSetState == 2"
            :min="0"
            style="width: 120px"
            @change="handleChange"
          />
          个月
        </template>
      </el-table-column>
      <el-table-column
        v-else
        label="约定时长"
        show-overflow-tooltip
        align="center"
      >
        <template #default="{ row }">{{ row.ServiceDateSet }}个月</template>
      </el-table-column>
      <el-table-column
        v-if="!appoint"
        label="约定数量"
        width="200"
        align="center"
      >
        <template #default="{ row }">
          <el-input-number
            v-model="row.TaskNumSet"
            :disabled="TaskSetState == 2"
            :min="0"
            style="width: 120px"
            @change="handleChange"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-else
        label="约定数量"
        show-overflow-tooltip
        align="center"
      >
        <template #default="{ row }">{{ row.TaskNumSet }}</template>
      </el-table-column>
      <el-table-column label="已下派任务" show-overflow-tooltip align="center">
        <template #default="{ row }">{{ row.WorkTaskCount }}</template>
      </el-table-column>
      <el-table-column label="已完成数量" show-overflow-tooltip align="center">
        <template #default="{ row }">{{ row.FinishCount }}</template>
      </el-table-column>
      <el-table-column
        label="剩余未完成数量"
        show-overflow-tooltip
        align="center"
      >
        <template #default="{ row }">{{ row.noFinishCount }}</template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div>
          <el-form-item label="备注:">
            <el-input
              v-model="TaskSetMemo"
              :disabled="TaskSetState == 2 || appoint"
              style="width: 600px"
            />
          </el-form-item>
        </div>
        <div style="display: flex; align-items: center">
          <div>
            <el-button
              :type="TaskSetFiles.length != 0 ? 'success' : 'primary'"
              style="margin-right: 20px"
              @click="NewAttach = true"
            >
              附件
            </el-button>
          </div>
          <div v-if="!appoint">
            <el-text
              v-if="TaskSetState == 1"
              type="warning"
              style="margin-right: 20px"
            >
              待审核
            </el-text>

            <el-button v-if="TaskSetState != 2" type="primary" @click="save">
              确认约定
            </el-button>

            <el-text
              v-if="TaskSetState == 2"
              type="success"
              style="margin-right: 20px"
            >
              已审核通过
            </el-text>
          </div>
          <div v-else>
            <el-select
              v-model="TaskSetState"
              placeholder="请选择审核状态"
              size="large"
              style="width: 150px; margin-right: 20px"
            >
              <el-option
                v-for="item in selectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
            <el-button type="primary" @click="audit">确认审核</el-button>
          </div>
        </div>
      </div>
    </template>
    <!-- 上传附件 -->
    <el-dialog v-model="NewAttach" title="上传附件" @close="attachClose">
      <el-upload
        :disabled="TaskSetState == 2 || appoint"
        :file-list="TaskSetFiles"
        :multiple="true"
        action="https://api.sanjianke.com/common/Upload/upload?file=AgreedTask&type=image"
        list-type="picture-card"
        :on-preview="NewPreview"
        :on-remove="handleRemove"
        :on-success="NewSuccess"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <template v-if="TaskSetState != 2 && !appoint" #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="isOk">确定</el-button>
        </div>
      </template>
      <el-dialog v-model="dialogVisible" top="3vh">
        <img
          w-full
          :src="dialogImageUrl"
          alt="Preview Image"
          style="width: 100%"
        />
      </el-dialog>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import { getWorkTaskSetList, OrderTaskCheck } from '@/api/common'
  import { getOrderTaskSetList } from '@/api/storeDetails'
  import { OrderTaskSetSave } from '@/api/businessOrderCreate'
  export default defineComponent({
    name: 'AgreedTaskEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        dialogImageUrl: '',
        dialogVisible: false,
        TaskSetFiles: [],
        NewAttach: false,
        TaskSetMemo: '',
        selectList: [],
        direct: false,
        TaskSetState: 0,
        WorktaskInfo: {},
        OrderListID: false,
        appoint: false,
        list: [],
        listLoading: true,
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = (WorktaskInfo, check) => {
        state.WorktaskInfo = WorktaskInfo
        state.OrderListID = WorktaskInfo.OrderListID
        getTaskSettingList()
        state.title = `${WorktaskInfo.ProductName}约定任务设置`
        if (check && check == 'appoint') {
          // 审核状态下进入
          state.appoint = true
          state.TaskSetState = WorktaskInfo.TaskSetState
        } else if (check && check == 'direct') {
          // 审核页面直接生成
          state.appoint = false
          console.log(state.WorktaskInfo, ' state.WorktaskInfo')
          state.direct = true
          state.TaskSetState = WorktaskInfo.TaskSetState
          state.WorktaskInfo.OrderList = {
            ProductID: state.WorktaskInfo.ProductID,
            ProductClassID: state.WorktaskInfo.ProductClassID,
          }
        } else {
          // 店长页面进入
          state.appoint = false
          state.TaskSetState = WorktaskInfo.OrderList.TaskSetState
        }

        if (state.TaskSetState == 1) {
          state.selectList = [
            {
              label: '请选择',
              value: 1,
              disabled: true,
            },

            {
              label: '审核通过',
              value: 2,
            },
            {
              label: '审核驳回',
              value: -1,
            },
          ]
        }
        if (state.TaskSetState == 3) {
          state.selectList = [
            {
              label: '请选择',
              value: 3,
              disabled: true,
            },
            {
              label: '审核通过',
              value: 2,
            },
            {
              label: '审核驳回',
              value: -1,
            },
          ]
        }
        if (state.TaskSetState == 2) {
          state.selectList = [
            {
              label: '请选择',
              value: 2,
              disabled: true,
            },
            {
              label: '开放修改',
              value: 3,
            },
          ]
        }

        state.listLoading = false
        state.dialogFormVisible = true
      }

      const getTaskSettingList = async () => {
        const dataMsg = {
          OrderListID: state.OrderListID,
        }
        const {
          data: { OrderTaskSetList, TaskSetFiles, TaskSetMemo },
        } = await getOrderTaskSetList(dataMsg)
        if (OrderTaskSetList.length == 0) {
          getList()
        } else {
          state.TaskSetFiles = TaskSetFiles
          state.TaskSetMemo = TaskSetMemo
          state.list = OrderTaskSetList
        }
        console.log(OrderTaskSetList, '222')
      }
      const getList = async () => {
        console.log(state.WorktaskInfo, 'state.WorktaskInfo.OrderList')

        const dataMsg = {
          ProductID: state.WorktaskInfo.OrderList.ProductID,
          ProductClassID: state.WorktaskInfo.OrderList.ProductClassID,
        }
        const {
          data: { WorkTaskSetList },
        } = await getWorkTaskSetList(dataMsg)
        state.list = WorkTaskSetList
        for (let index = 0; index < state.list.length; index++) {
          state.list[index].TaskNumSet = state.list[index].TaskSetNum
          state.list[index].ServiceDateSet = state.list[index].ServiceDates
        }
      }
      const close = () => {
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const save = async () => {
        console.log(state.TaskSetFiles, 'state.TaskSetFiles')

        const dataMsg = {
          TaskSetMemo: state.TaskSetMemo,
          TaskSetFiles: state.TaskSetFiles,
          OrderListID: state.OrderListID,
          TaskSetList: state.list,
        }
        const { msg } = await OrderTaskSetSave(dataMsg)
        if (state.direct) {
          audit(1)
        } else {
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          emit('fetch-data')
          close()
        }
      }
      const audit = async (direct) => {
        let TaskSetState

        if (direct == 1) {
          TaskSetState = 2
        } else {
          TaskSetState = state.TaskSetState
        }
        console.log(state.TaskSetState, 'state.TaskSetStatestate.TaskSetState')

        const dataMsg = {
          OrderListID: state.OrderListID,
          TaskSetState: TaskSetState,
        }
        const { msg } = await OrderTaskCheck(dataMsg)
        $baseMessage(msg, 'success', 'vab-hey-message-success')
        emit('fetch-data')
        close()
      }

      const NewPreview = (uploadFile) => {
        state.dialogImageUrl = uploadFile.url
        state.dialogVisible = true
      }

      const NewSuccess = (response) => {
        const data = {
          url: response.data.url,
        }
        state.TaskSetFiles.push(data)
        console.log(state.clickGiftAttFiles, 'clickGiftAttFiles')

        ElMessage({
          message: '上传成功',
          type: 'success',
        })
      }
      const isOk = () => {
        console.log(state.TaskSetFiles, 'TaskSetFiles')

        state.NewAttach = false
      }

      const handleRemove = (row) => {
        const index = state.TaskSetFiles.findIndex((fileItem) => {
          console.log(fileItem.url, row.response.data.url, '123')
          return fileItem.url === row.response.data.url
        })
        state.TaskSetFiles.splice(index, 1)
      }

      return {
        ...toRefs(state),
        audit,
        handleRemove,
        isOk,
        NewPreview,
        NewSuccess,
        getTaskSettingList,
        getList,
        showEdit,
        close,
        save,
      }
    },
  })
</script>
